import React, { memo, useEffect } from 'react'
import type { ReactNode } from 'react'
import { HotRecommendWrapper } from './style'
import AreaHeader from '@/components/area-header'
import RecommendItem from '@/components/recommend-item'
import { createRecommendStore } from '@/store'
import type { hotData } from '@/views/discover/c-views/recommend/store/recommend'

interface Iprops {
    children?: ReactNode
}

const HotRecommend: React.FC<Iprops> = () => {
    const { hotData, getHotRecommendData } = createRecommendStore()

    useEffect(() => {
        getHotRecommendData()
    }, [getHotRecommendData])

    return (
        <HotRecommendWrapper>
            <AreaHeader
                title="热门推荐"
                keywords={['华语', '流行', '摇滚', '民谣', '电子']}
                moreLink="/discover/songs"
            ></AreaHeader>
            <div className="item-content">
                {hotData.slice(0, 8).map((item: hotData) => (
                    <div className="item" key={item.picUrl}>
                        <RecommendItem
                            imgUrl={item.picUrl}
                            players={item.playCount}
                            name={item.name}
                        ></RecommendItem>
                    </div>
                ))}
            </div>
        </HotRecommendWrapper>
    )
}

export default memo(HotRecommend)
